<template>
	<!-- 签收确认已接地磅页面 -->
	<view class="container">
		<topBar>签收确认</topBar>
		<view class="content">
			<view class="cart-info">
				<view class="cart-types">
					<Button2 class="btn">燃油</Button2>
					<Button2 class="btn">名录车</Button2>
				</view>
				<view class="cart-code">
					<view class="code-item">
						川
					</view>
					<view class="code-item">
						A
					</view>
					<view class="code-separator">
						·
					</view>
					<view class="code-item">
						8
					</view>
					<view class="code-item">
						8
					</view>
					<view class="code-item">
						8
					</view>
					<view class="code-item">
						8
					</view>
					<view class="code-item">
						8
					</view>
					<view class="code-item">

					</view>

				</view>
				<view class="cart-type">
					新能源
				</view>
			</view>

			<view class="cart-lines">
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="nowMaterialType == null &&'no-check'">
						<text>{{nowMaterialType?.name || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="nowMaterialType == null?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>
				<view class="line">
					<view class="title">
						实际装载
					</view>
					<view class="val">
						24吨
					</view>
				</view>

			</view>
		</view>

		<view class="bottom-btns">
			<view class="btn danger" @click="showAbnormalSignPopup">
				异常签收
			</view>
			<view class="btn primary" @click="saveReceiving">
				正常签收
			</view>
		</view>
		<!-- 物料类型弹窗 -->
		<MaterialTypePopup v-if="isShowMaterialTypePopup" @saveMaterialType="saveMaterialType" />

		<!-- 异常签收弹窗 -->
		<AbnormalSignPopup v-if="isShowAbnormalSignPopup" @btnClick="saveAbnormalSign" />
	</view>

</template>

<script setup lang="ts">
	import Button2 from '@/components/button2/button2.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue'
	import AbnormalSignPopup from '@/components/consumption/abnormalSignPopup/abnormalSignPopup.vue';
	import { ref } from 'vue';

	// 当前物料类型
	const nowMaterialType = ref(null)
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		isShowMaterialTypePopup.value = true
	}
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {

			nowMaterialType.value = item
		}
		isShowMaterialTypePopup.value = false
	}
	// 是否显示异常签收弹窗
	const isShowAbnormalSignPopup = ref(false)
	// 显示异常签收弹窗
	const showAbnormalSignPopup = () => {
		isShowAbnormalSignPopup.value = true
	}
	// 保存异常签收
	const saveAbnormalSign = (data) => {
		if (data) {
			console.log('开始保存异常签收');
			isShowAbnormalSignPopup.value = false
		} else {
			isShowAbnormalSignPopup.value = false
		}
	}
	// 扣方原因
	const reasonList = ['未装满', '料不好', '半车', '其他',]
	// 当前扣方原因
	const nowReason = ref('未装满')
	// 改变扣方原因
	const changeReason = (btn) => {
		nowReason.value = btn
	}
	// 保存新增收料
	const saveReceiving = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		width: 686rpx;
		// height: 1140rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;



		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0rpx;
				font-size: 40rpx;
				font-weight: bold;

				.code-item {
					width: 68rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #EFF6FE;
					border-radius: 8rpx;


				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;



				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
						font-size: 28rpx;
					}

					.reason-input {
						width: 120rpx;
					}

					&.deduction-amount {
						color: #EB4F51;
					}

					&.no-check {
						color: #989DA5;
					}

					&.btns {
						font-weight: normal;
					}


				}

			}


		}

		.btn {
			margin-left: 8rpx;
			border-radius: 4rpx;

			&.no-active-btn {
				color: $info-color;
				background: rgba(46, 135, 255, 0.1);
			}
		}

	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		padding: 16rpx 32rpx 66rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			padding: 22rpx 0rpx;
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: center;
			color: #fff;
			border-radius: 48rpx;
			border: 2rpx solid $primary-color;

			&.danger {
				margin-right: 12rpx;
				width: 226rpx;
				color: $danger-color;
				border-color: $danger-color;
			}

			&.primary {
				flex: 1;
				background-color: $primary-color;
			}
		}
	}
</style>